<template>
    <div class="app-container">
        <div class="plusList">
            <h5>基础信息</h5>
            <el-form ref="form"  :model="form" label-width="150px" :disabled="disabled">
                <el-row>
                    <el-col v-if="isType==2" :span="24">
                        <el-form-item label="商户名称" prop="shop_name">
                            <!-- <span>美美咖自营</span> -->
                            <el-input v-model="form.shop_name" />
                        </el-form-item>
                    </el-col>
                    <el-col v-else :span="24">
                        <el-form-item label="商户名称" prop="shop_name">
                            <el-input v-model="form.shop_name" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="plus会员卡名称" prop="name">
                            <el-input v-model="form.name" />
                        </el-form-item>
                    </el-col>
                    <el-col v-if="isType!=2" :span="24">
                        <el-form-item label="plus会员卡模板">
                            <el-input v-model="form.template_name" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="会员卡描述">
                            <el-input
                                v-model="form.desc"
                                type="textarea"
                                size="large"
                                :rows="4"
                                maxlength="100"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="会员卡原价">
                            <el-input v-model="form.origin_price" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="会员卡售价">
                            <el-input v-model="form.sale_price" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="成本价" prop="cost_price">
                            <el-input v-model="form.cost_price" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="服务费">
                            <el-input v-model="form.service_price" />
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                        <el-form-item label="排序">
                            <el-input v-model="form.sort" />
                        </el-form-item>
                    </el-col>-->
                    <el-col :span="24">
                        <el-form-item label="实际销量">
                            <el-input v-model="form.sale_num" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="虚拟销量">
                            <el-input v-model="form.fake_sale_num" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="是否置顶" prop="v_top">
                            <el-radio-group v-model="form.v_top">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <el-form-item label="购买须知" prop="purchase_note">
                            <Tinymce v-model="form.purchase_note" :readonly="1" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <h5>会员卡内容</h5>
        <div v-loading="tableLoading" class="listDiv">
            <!-- 商品卡券 -->
            <div v-if="isType!=2">
                <div class="df mt_20">
                    <span class="col_666" />
                    <h5 class="font_16">商家卡券</h5>
                </div>
                <el-table ref="shopData" :data="shopData" style="width: 100%">
                    <el-table-column prop="ticket_type" label="优惠券类型" align="center" />
                    <el-table-column prop="shop_name" label="适用范围" align="center" />
                    <el-table-column prop="name" label="优惠券名称" align="center" />
                    <el-table-column prop="service_name" label="优惠券对应服务" align="center" />
                    <el-table-column label="有效期" align="center">
                        <template slot-scope="scope">
                            <span
                                v-if=" scope.row.start_time&&scope.row.end_time"
                            >{{ scope.row.start_time+' 至 '+scope.row.end_time }}</span>
                            <span v-else />
                        </template>
                    </el-table-column>
                    <el-table-column prop="num" label="数量" align="center">
                        <template slot-scope="scope">
                            <span>{{ scope.row.num=1 }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 平台卡券 -->
            <div class="df mt_20">
                <span class="col_666" />
                <h5 class="font_16">平台卡券</h5> 
                <span style="margin-left:30px">可领取数量：{{form.goods_tickets_num}}</span>
            </div>
            <el-table ref="goodsData" :data="goodsData" style="width: 100%">
                <el-table-column prop="ticket_type" label="优惠券类型" align="center" />
                <el-table-column prop="scope" label="适用范围" align="center" />
                <el-table-column prop="type_name" label="优惠券名称" align="center" />
                <el-table-column prop="available" label="优惠券对应商品" align="center" />
                <el-table-column prop="type_money" label="优惠券金额" align="center" />
                <el-table-column label="有效期" align="center">
                    <template slot-scope="scope">
                        <span
                            v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
                        >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
                        <span v-else />
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="tiket_count" label="张数" /> -->
                <el-table-column prop="num" label="数量" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.num=1 }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 医美卡券 -->
            <div class="df mt_20">
                <span class="col_666" />
                <h5 class="font_16">医美卡券</h5>
                <span style="margin-left:30px">可领取数量：{{form.beauty_tickets_num}}</span>

            </div>
            <el-table ref="beautyData" :data="beautyData" style="width: 100%">
                <el-table-column prop="ticket_type" label="优惠券类型" align="center" />
                <el-table-column prop="hospital_name" label="适用范围" align="center" />
                <el-table-column prop="type_name" label="优惠券名称" align="center" />
                <el-table-column prop="project_name" label="优惠券对应项目" align="center" />
                <el-table-column label="有效期" align="center">
                    <template slot-scope="scope">
                        <span
                            v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
                        >{{ scope.row. start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
                        <span v-else />
                    </template>
                </el-table-column>
                <el-table-column prop="num1" label="数量" align="center">
                    <template slot-scope="scope">
                        <span>{{ scope.row.num1=1 }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 自营商品 -->
            <div v-if="isType == 2">
                <div class="df mt_20">
                    <span class="col_666" />
                    <h5 class="font_16">自营商品</h5>
                </div>
                <el-table :data="form.goods_info" style="width: 100%">
                    <el-table-column prop="good_name" label="商品名称" align="center" />
                    <!-- <el-table-column prop="good_spec_name" label="规格" align="center" /> -->
                    <el-table-column prop="price" label="单价" align="center" />
                    <el-table-column prop="num" label="数量" align="center" />
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
import { getDetails, getDetail1 } from "@/api/plusMange";
import Tinymce from "@/components/NewTinymce";
export default {
    name: "PlusListInfo",
    components: { Tinymce },
    data() {
        return {
            form: {
                shop_name: "",
                name: "",
                template_name: "",
                cost_price: "",
                desc: "",
                origin_price: "",
                sale_price: "",
                service_price: "",
                sort: "",
                sale_num: "",
                fake_sale_num: "",
                v_top: "",
                goods_info: [],
                beauty_tickets_num:'',
                goods_tickets_num:''
            },
            isType: "", // 判断是否自营
            shopData: [], // 商家列表
            goodsData: [], // 平台
            beautyData: [], // 医美
            tableLoading: true,
            disabled: true
        };
    },
    created() {
        // const id = this.$route.query.id;
        this.isType = this.$route.query.types;
        this.detailsList({ id: this.$route.query.id });
    },
    methods: {
        detailsList(e) {
            if (this.isType == 1) {
                getDetail1(e)
                    .then(res => {
                        if (res.data.code == 200) {
                            // console.log(res);
                            const resData = res.data.data;
                            this.form = resData;
                            this.shopData = resData.shop_tickets_list;
                            this.goodsData = resData.goods_tickets_list;
                            this.beautyData = resData.beauty_tickets_list;
                            this.form.shop_name = resData.shop_name;
                            this.form.name = resData.card_info.name;
                            this.form.template_name =
                                resData.template_info.template_name;
                            this.form.desc = resData.card_info.desc;
                            this.form.origin_price =
                                resData.card_info.origin_price;
                            this.form.sale_price = resData.card_info.sale_price;
                            this.form.service_price =
                                resData.card_info.service_price;
                            this.form.sale_num = resData.card_info.sale_num;
                            this.form.fake_sale_num =
                                resData.card_info.fake_sale_num;
                            this.form.v_top = resData.card_info.v_top;
                            this.isType = resData.card_info.type;
                            this.form.purchase_note =
                                resData.card_info.purchase_note;
                        } else {
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: "warning"
                            });
                        }
                        this.tableLoading = false;
                    })
                    .catch(err => {
                        this.errorStatus(err.msg);
                        this.tableLoading = false;
                    });
            } else {
                getDetails(e)
                    .then(res => {
                        if (res.data.code == 200) {
                            // console.log(res)
                            const resData = res.data.data;
                            this.form = resData;
                            this.shopData = resData.shop_tickets_list;
                            this.goodsData = resData.goods_tickets_list;
                            this.beautyData = resData.beauty_tickets_list;
                            // this.form.shop_name = resData.shop_name;
                            this.form.name = resData.card_info.name;
                            this.form.template_name =
                                resData.template_info.template_name;
                            this.form.desc = resData.card_info.desc;
                            this.form.origin_price =
                                resData.card_info.origin_price;
                            this.form.sale_price = resData.card_info.sale_price;
                            this.form.service_price =
                                resData.card_info.service_price;
                            this.form.cost_price =
                                resData.card_info.cost_price;
                            this.form.sale_num = resData.card_info.sale_num;
                            this.form.fake_sale_num =
                                resData.card_info.fake_sale_num;
                            this.form.v_top = resData.card_info.v_top;
                            this.isType = resData.card_info.type;
                            this.form.purchase_note =
                                resData.card_info.purchase_note;
                            this.form.goods_tickets_num =
                                resData.card_info.goods_tickets_num;
                            this.form.beauty_tickets_num =
                                resData.card_info.beauty_tickets_num;
                        } else {
                            this.$message({
                                showClose: true,
                                message: res.data.msg,
                                type: "warning"
                            });
                        }
                        this.tableLoading = false;
                    })
                    .catch(err => {
                        this.errorStatus(err.msg);
                        this.tableLoading = false;
                    });
            }
        },
        // 弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        },
        // 成功状态弹窗
        succStatus(txt, status) {
            this.eleMsg(txt, "success");
        },
        // 失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        }
    }
};
</script>
<style scoped>
.el-range-editor--medium.el-input__inner {
    width: 236px;
}
/* 分页样式 */
.pagesCon {
    margin-top: 20px;
    text-align: right;
}
.font_16 {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin: 0;
    margin-bottom: 10px;
}
.mt_20 {
    margin-top: 20px;
}
.col_666 {
    display: inline-block;
    width: 7px;
    height: 20px;
    background: #409eff;
    margin-right: 3px;
    border-radius: 4px;
}
.df {
    display: flex;
}
</style>
